<template>
    <div class="nav" v-show="drawer">
        <!-- 遮罩层 -->
        <div class=" mask" @click="close" @touchmove.stop.prevent></div>
        <!-- 内容 -->
        <div class="warpper" :style="{ width: drawer ? '240px' : '0px' }">
            <!-- 博主介绍 -->
            <div class="blogger-info">
                <el-avatar src=""></el-avatar>
            </div>
            <!-- 博客信息 -->
            <div class="blog-info-wrapper">
                <div class="blog-info-data">

                    <nuxt-link @click="handleClick('/archive')">
                        <div style="font-size: 0.875rem">文章</div>
                        <div style="font-size: 1.125rem;">
                            10
                        </div>
                    </nuxt-link>
                </div>
                <div class="blog-info-data">

                    <nuxt-link @click="handleClick('/categorys')">
                        <div style="font-size: 0.875rem">分类</div>
                        <div style="font-size: 1.125rem">
                           10
                        </div>
                    </nuxt-link>
                </div>
                <div class="blog-info-data">
                    <nuxt-link @click="handleClick('/tag')">
                        <div style="font-size: 0.875rem">标签</div>
                        <div style="font-size: 1.125rem">
                           11
                        </div>
                    </nuxt-link>
                </div>
            </div>
            <hr />
            <!-- 页面导航 -->
            <div class="menu-container">
                <div class="menus-item">
                    <nuxt-link to="/">
                        <i class="el-icon-star-off" /> 首页
                    </nuxt-link>
                </div>
                <div class="menus-item">
                    <nuxt-link to="/archive">
                        <i class="el-icon-s-order" /> 归档
                    </nuxt-link>
                </div>

                <div class="menus-item">

                    <nuxt-link to="/categorys">
                        <i class="el-icon-menu" /> 分类
                    </nuxt-link>
                </div>
                <div class="menus-item">
                    <nuxt-link to="/tag">
                        <i class="el-icon-discount" /> 标签
                    </nuxt-link>
                </div>
<!--                <div class="menus-item">
                    <nuxt-link @click="handleClick('/photo')">
                        <i class="el-icon-picture" /> 画廊
                    </nuxt-link>
                </div>

                <div class="menus-item">
                    <nuxt-link @click="handleClick('/sponsor')">
                        <i class="iconfont icon-jineqiandaiyueshangjin" /> 打赏
                    </nuxt-link>
                </div>
                <div class="menus-item">
                    <nuxt-link @click="handleClick('/message')">
                        <i class="iconfont icon-pinglun" /> 留言
                    </nuxt-link>
                </div>-->
                <div class="menus-item">
                    <nuxt-link to="/links">
                        <i class="el-icon-position" /> 友链
                    </nuxt-link>
                </div>
                <div class="menus-item">
                    <nuxt-link to="/about">
                        <i class="el-icon-info" /> 关于
                    </nuxt-link>
                </div>

<!--                <div class="menus-item" v-if="!isLogin">
                    <nuxt-link @click="openLogin"><i class="el-icon-user-solid" /> 登录 </nuxt-link>
                </div>
                <div v-else>
                    <div class="menus-item">
                        <nuxt-link @click="handleClick('/user')"><i class="el-icon-user" /> 个人中心 </nuxt-link>
                    </div>
                    <div class="menus-item">
                        <nuxt-link @click="logout"><i class="el-icon-switch-button" /> 退出</nuxt-link>
                    </div>
                </div>-->
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
 import {useStore} from '@/store'
 import {computed} from 'vue'
 const commonStore = useStore();
 const drawer = computed(()=>commonStore.drawer);
 const router = useRouter()
 const close = ()=> {
   commonStore.setDrawer(false)
 }
 const handleClick = (val: string)=> {
   commonStore.setDrawer(false);
   router.push({name:val})
   console.log(router)

 }
 const openLogin = ()=> {
   commonStore.setLoginFlag(true)
   // this.$store.state.loginFlag = true;
 }
 const logout = ()=> {
   //如果在个人中心则跳回上一页
  /* if (this.$route.path === "/user") {
     this.$router.go(-1);
   }*/
  /* logout().then(res => {
     removeToken()
     location.reload()
     this.$message({ type: "success", message: "注销成功" });
   }).catch(err => {
     console.log(err)
   });;*/
 }
</script>

<style lang="scss" scoped>
a {
    color: var(--text-color);
}

.nav {
    height: 100%;

    .mask {
        background: rgba(101, 101, 101, 0.8); //设置透明度 ，改最后一个数值，0-1
        width: 100%;
        height: 100%;
        z-index: 9;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .warpper {
        font-weight: 700;
        font-size: 1.2rem;
        background-color: var(--background-color);
        position: fixed;
        top: 0;
        z-index: 100;
        height: 100vh;
        animation: 0.8s ease 0s 1 normal none running sidebarItem;

        .blogger-info {
            padding: 26px 30px 0;
            text-align: center;
            z-index: 99;

            :deep(.el-avatar){
                width: 80px;
                height: 80px;
            }
        }

        .blog-info-wrapper {
            display: flex;
            align-items: center;
            padding: 12px 10px 0;

            .blog-info-data {
                flex: 1;
                line-height: 2;
                text-align: center;

                a {
                    text-decoration: none;

                }
            }
        }

        hr {
            border: 2px dashed #d2ebfd;
            margin: 20px 0;
        }

        .menu-container {
            padding: 0 10px 40px;
            overflow: scroll;

            .menus-item {


                a {
                    padding: 6px 30px;
                    display: block;
                    line-height: 2;
                    text-decoration: none;
                }

                i {
                    margin-right: 1rem;
                }
            }
        }
    }
}

@keyframes sidebarItem {
    0% {
        transform: translateX(200px);
    }

    100% {
        transform: translateX(0);
    }
}
</style>
